<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.使用原生DOM -->
  <script>
    window.onload = function () {
      // 获取id为btn1的元素
      var btn1 = document.getElementById('btn1')
      // btn1点击事件
      btn1.onclick = function () {
        // 获取到input输入框的值
        var username = document.getElementById('username').value
        alert(username)
      }
    }
  </script>

  <!-- 引入jQuery 本地引入和远程引入 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <!-- 2.使用jQuery -->
  <script>
    // 绑定文档加载完成的监听
    $(function () {
      // 找到btn2按钮，绑定点击监听
      $('#btn2').click(function () {
        // 找到input输入框，获取其中的值 val()我们在后面会讲到 这里先用一下
        var username = $('#username').val()
        alert(username)
      })
    })
    /*
      这里面我们用到了两个概念，分别是：
        jQuery核心函数：($/jQuery)
        jQuery核心对象：执行$()返回的对象
      接下来我们就来说一下jQuery的函数和对象
    */
  </script>
</head>
<body>
  <!-- 
    需求：点击确定按钮，提示输入的值
   -->
   用户名:<input type="text" id="username">
   <button id="btn1">确定(原生)</button>
   <button id="btn2">确定(jQuery)</button>
</body>
</html>